<template>
	<view class="tutor-tab-1" :style="{padding: padding}">
		<view class="tab-l">
			<view class="tab-item" @tap="tapSwtichTab(item,index)" v-for="(item, index) in  list" :key="index">
				<text :class="{'activeItem' : atciveIndex==index}">{{item}}</text>
				<image class="imagesBt" src="../../../static/user/bg_line.png" v-if="atciveIndex===index"></image>
			</view>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: 'TutorTab1',
		emits: ['clickSwtichTab'],
		props: {
			//栏目数据列表
			list: {
				type: Array,
				default: []
			},
			//选中的项目index
			atciveIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				padding: "46rpx 0"
			}
		},
		methods: {
			tapSwtichTab(item, index) {
				this.$emit("clickSwtichTab", {
					item,
					index
				})
			}
		}
	}
</script>

<style>
	.tutor-tab-1 {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		color: #666666;
	}

	.tutor-tab-1 .tab-l {
		display: flex;
		justify-content: space-between;
	}

	.tutor-tab-1 .tab-l .tab-item {
		position: relative;
		margin-right: 30rpx;
	}

	.tutor-tab-1 .tab-l .tab-item text {
		color: #666;
		font-weight: bold;
		font-size: 36rpx;
	}

	.tutor-tab-1 .tab-l .tab-item .imagesBt {
		position: absolute;
		/* 绝对定位 */
		top: 58rpx;
		/* 将半圆放置在文本下方 */
		left: 50%;
		/* 使半圆居中 */
		transform: translateX(-50%);
		/* 完全居中 */
		width: 38rpx;
		/* 半圆的宽度 */
		height: 13rpx;
		/* 半圆的高度 */
	}

	.activeItem {
		color: #000 !important;
	}
</style>